<template>
<div id="login-container">
    <div class="login-win">
    <el-input v-model="username" placeholder="请输入用户名" id="User"></el-input>
    <el-input v-model="userpwd" placeholder="请输入密码" id="Pass"></el-input>
    <div class="login-but">
    <el-button type="info" @click="loginx()" >登录</el-button>
    <el-button type="info" @click="add">注册</el-button>
    </div>
    </div>
</div>
</template>
<script>
import axios from 'axios'; 
export default {
    data(){
        return{
            username:'',
            userpwd:''

        }
    },

            methods:{
        loginx(){
            let _this =this;
            const user =  this.username;
            const pass =  this.userpwd;
            console.log(user)
            axios.get('http://localhost:5002/Users/action',{params:{Name:user,passWord:pass}}
        ).then(function (response) {
                if(JSON.stringify(response.data)!=0){
                let userRole = JSON.stringify(response.data);
                _this.$store.commit('roleGet',userRole);
                _this.$router.replace('/home'); 
                }else{
                    alert('用户名密码错误')
                }
            
        }) .catch(function (error) {
            console.log(error);
        })

        },

        add(){
            const user = this.username;
            const pass = this.userpwd;
            if(user == ''||pass == ''){
                alert('用户名密码为空')
            }else if(user.indexOf(' ') != -1||pass.indexOf(' ')!= -1){
                alert('用户名密码中含有空格')
            }else{
                  axios.post('http://localhost:5002/Users',
            {Name:user,passWord:pass}).then(function(res){
               if(JSON.stringify(res.data)){
                alert('注册成功')
               }else{
                alert('注册失败')
               }
            }).catch(function(err){
                console.log(err)
            })
            }
        },
    }
}
</script>
<style>
#login-container{
    width: 100%;
    height: 800px;
    background: #e5e9f2;
    background: url('./1.jpg');
    display: flex;
    align-content: center;
    justify-content: center;
}
.login-win{
    width: 200px;
    height: auto;
  position:absolute;
  margin: 300px auto;
}
.login-but{
    width: 100%;
    height: auto;
    margin: 0 20px;
}
</style>